<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementUI.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">
    <input type="text" v-model="form.name" placeholder="请输入物资名称"> <br>

    <el-button @click="handleAdd">添加</el-button>
    <el-button @click="exportExcel">导出</el-button>
    <el-upload
            class="avatar-uploader"
            action="/goods/upload"
            :show-file-list="false"
            name="file"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
        <el-button>导入</el-button>
    </el-upload>

    <el-table
            :data="tableData">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称">
        </el-table-column>
        <el-table-column
                prop="categoryName"
                label="分类">
        </el-table-column>

        <el-table-column
                prop="brandName"
                label="品牌">
        </el-table-column>
        <el-table-column
                prop="sku"
                label="规格">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="备注">
        </el-table-column>

        <el-table-column
                prop="num"
                label="库存">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.id)" type="text" size="small">申请</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="添加物资" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
            <el-form-item label="物资名称" >
                <el-input v-model="pojo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物资规格" >
                <el-input v-model="pojo.sku" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物资库存" >
                <el-input v-model="pojo.num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" >
                <el-input v-model="pojo.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" >
                <el-select v-model="pojo.categoryId" placeholder="请选择分类" :clearable="true">
                    <el-option v-for="c in categoryList" :label="c.name" :value="c.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="品牌" >
                <el-select v-model="pojo.brandId" placeholder="请选择品牌" :clearable="true">
                    <el-option v-for="b in brandList" :label="b.name" :value="b.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            tableData:[],
            pageNum:1,
            pageSize:2,
            total:0,
            form:{
                name:""
            },
            dialogFormVisible:false,
            pojo:{},
            user:{},
            categoryList:[],
            brandList:[]
        },
        watch:{
            form:{
                deep:true, // 深入，深度
                handler(val){
                    this.findPage();
                }
            }
        },
        methods:{
            handleAvatarSuccess(res, file) {
                this.findPage();
                this.$message.success('数据上传成功！!');
            },
            beforeAvatarUpload(file) {

                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return  isLt2M;
            },
            exportExcel(){
                // 导出不需要ajax，而是直接访问
                location.href="/goods/exportExcel";
            },
            findBrandList(){
                axios.get("/brand/findAll").then(res=>{
                    this.brandList = res.data;
                })
            },
            findCategoryList(){
                axios.get("/category/findAll").then(res=>{
                    this.categoryList = res.data;
                })
            },
            add(){
                axios.post("/goods/add",this.pojo).then(res=>{
                    this.pojo={};
                    this.dialogFormVisible = false;
                    this.findPage();
                })
            },
            handleAdd(){
                this.pojo={};
                this.dialogFormVisible = true;
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.findPage();
            },
            findPage(){
                axios.post(`/goods/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            }

        },
        created(){
            this.user = JSON.parse(localStorage.getItem("user"));
            this.findPage();
            this.findCategoryList();
            this.findBrandList();
        }
    })
</script>
</body>
</html>